<template>
  <a-layout class="layout">
    <a-layout-header class="header">
      <div class="logo">综测系统</div>
      <a-menu
        v-model:selectedKeys="selectedKeys"
        mode="horizontal"
        theme="dark"
        @click="handleMenuClick"
      >
        <a-menu-item key="/dashboard">
          <template #icon><home-outlined /></template>
          首页
        </a-menu-item>
        
        <a-sub-menu key="users">
          <template #icon><user-outlined /></template>
          <template #title>用户管理</template>
          <a-menu-item key="/users/list">用户列表</a-menu-item>
        </a-sub-menu>
        
        <a-sub-menu key="announcements">
          <template #icon><notification-outlined /></template>
          <template #title>公告管理</template>
          <a-menu-item key="/announcements/list">公告列表</a-menu-item>
          <a-menu-item key="/announcements/create">发布公告</a-menu-item>
        </a-sub-menu>
        
        <a-menu-item key="/certificates/list">
          <template #icon><trophy-outlined /></template>
          证书管理
        </a-menu-item>
        
        <a-sub-menu key="extra-review">
          <template #icon><file-text-outlined /></template>
          <template #title>附加分审查</template>
          <a-menu-item key="/extra-review/list">审查列表</a-menu-item>
          <a-menu-item key="/extra-review/students">学生列表</a-menu-item>
          <a-menu-item key="/extra-review/submit">提交申请</a-menu-item>
        </a-sub-menu>
        
        <a-sub-menu key="grades">
          <template #icon><read-outlined /></template>
          <template #title>成绩管理</template>
          <a-menu-item key="/grades/list">成绩列表</a-menu-item>
          <a-menu-item key="/grades/student">学生成绩</a-menu-item>
          <a-menu-item key="/grades/view">成绩视图</a-menu-item>
          <a-menu-item key="/grades/import">成绩导入</a-menu-item>
          <a-menu-item key="/grades/statistics">成绩统计</a-menu-item>
        </a-sub-menu>
        
        <a-sub-menu key="scores">
          <template #icon><star-outlined /></template>
          <template #title>综测分</template>
          <a-menu-item key="/scores/list">综测分列表</a-menu-item>
          <a-menu-item key="/scores/ranking">排名榜</a-menu-item>
        </a-sub-menu>
        
        <a-menu-item key="/review-records/list">
          <template #icon><folder-outlined /></template>
          审查记录
        </a-menu-item>
        
        <a-sub-menu key="system">
          <template #icon><setting-outlined /></template>
          <template #title>系统管理</template>
          <a-menu-item key="/system/colleges">学院管理</a-menu-item>
          <a-menu-item key="/system/majors">专业管理</a-menu-item>
          <a-menu-item key="/system/classes">班级管理</a-menu-item>
          <a-menu-item key="/system/courses">课程管理</a-menu-item>
          <a-menu-item key="/system/punish">处分管理</a-menu-item>
          <a-menu-item key="/system/punish-dict">处分字典</a-menu-item>
        </a-sub-menu>
      </a-menu>
      
      <a-dropdown class="user-dropdown">
        <a class="ant-dropdown-link" @click.prevent>
          <user-outlined />
          管理员
          <down-outlined />
        </a>
        <template #overlay>
          <a-menu>
            <a-menu-item @click="handleProfile">
              <user-outlined />
              个人中心
            </a-menu-item>
            <a-menu-divider />
            <a-menu-item @click="handleLogout">
              <logout-outlined />
              退出登录
            </a-menu-item>
          </a-menu>
        </template>
      </a-dropdown>
    </a-layout-header>
    
    <a-layout-content class="content">
      <RouterView />
    </a-layout-content>
  </a-layout>
</template>

<script setup lang="ts">
import { ref, watch } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import {
  HomeOutlined,
  UserOutlined,
  NotificationOutlined,
  TrophyOutlined,
  FileTextOutlined,
  ReadOutlined,
  StarOutlined,
  FolderOutlined,
  SettingOutlined,
  DownOutlined,
  LogoutOutlined
} from '@ant-design/icons-vue'

const route = useRoute()
const router = useRouter()

const selectedKeys = ref<string[]>([route.path])

watch(() => route.path, (newPath) => {
  selectedKeys.value = [newPath]
})

const handleMenuClick = ({ key }: { key: string }) => {
  router.push(key)
}

const handleProfile = () => {
  router.push('/my-profile')
}

const handleLogout = () => {
  router.push('/login')
}
</script>

<style scoped>
.layout {
  min-height: 100vh;
}

.header {
  display: flex;
  align-items: center;
  background: #001529;
  padding: 0 20px;
}

.logo {
  color: #fff;
  font-size: 18px;
  font-weight: bold;
  margin-right: 40px;
  min-width: 150px;
}

:deep(.ant-menu) {
  flex: 1;
  background: transparent;
}

.user-dropdown {
  margin-left: auto;
  color: rgba(255, 255, 255, 0.85);
  cursor: pointer;
}

.user-dropdown:hover {
  color: #fff;
}

.ant-dropdown-link {
  color: rgba(255, 255, 255, 0.85);
  display: flex;
  align-items: center;
  gap: 8px;
}

.ant-dropdown-link:hover {
  color: #fff;
}

.content {
  padding: 24px;
  background: #f0f2f5;
  min-height: calc(100vh - 64px);
}
</style>
